<template>
  <div class="finance-analysis-game">
    <!-- 游戏头部 -->
    <div class="game-header">
      <div class="header-content">
        <el-button icon="ArrowLeft" @click="goBack">返回游戏中心</el-button>
        <div class="game-title">
          <h1>💰 财务分析大师</h1>
          <p>分析财务报表，做出正确的财务决策</p>
        </div>
        <div class="game-stats">
          <el-tag type="success" size="large">关卡: {{ currentLevel }}/10</el-tag>
          <el-tag type="warning" size="large">得分: {{ score }}</el-tag>
          <el-tag type="danger" size="large">时间: {{ formatTime(timeLeft) }}</el-tag>
        </div>
      </div>
    </div>

    <!-- 游戏主体 -->
    <div class="game-container">
      <!-- 开始界面 -->
      <div v-if="gameStatus === 'ready'" class="game-start">
        <div class="start-card">
          <el-icon class="start-icon"><Money /></el-icon>
          <h2>财务分析大师</h2>
          <p>通过分析财务报表，回答问题，提升财务分析能力</p>
          <div class="game-rules">
            <h3>游戏规则</h3>
            <ul>
              <li>共10个关卡，每关展示一份财务报表</li>
              <li>根据报表数据回答问题</li>
              <li>每关有60秒时间限制</li>
              <li>答对得100分，答错不扣分</li>
              <li>完成所有关卡可获得成就徽章</li>
            </ul>
          </div>
          <el-button type="primary" size="large" @click="startGame">
            <el-icon><CaretRight /></el-icon>
            开始游戏
          </el-button>
        </div>
      </div>

      <!-- 游戏进行中 -->
      <div v-if="gameStatus === 'playing'" class="game-playing">
        <el-card class="financial-report">
          <template #header>
            <div class="report-header">
              <h3>{{ currentQuestion.companyName }} - {{ currentQuestion.reportType }}</h3>
              <el-tag>{{ currentQuestion.period }}</el-tag>
            </div>
          </template>
          
          <!-- 财务报表数据 -->
          <el-table :data="currentQuestion.tableData" border stripe>
            <el-table-column prop="item" label="项目" width="200" />
            <el-table-column prop="value" label="金额(万元)" align="right">
              <template #default="{ row }">
                <span :class="{ 'negative': row.value < 0 }">
                  {{ formatNumber(row.value) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="ratio" label="占比" align="right" v-if="currentQuestion.showRatio">
              <template #default="{ row }">
                {{ row.ratio }}%
              </template>
            </el-table-column>
          </el-table>

          <!-- 财务指标卡片 -->
          <div class="financial-indicators" v-if="currentQuestion.indicators">
            <div class="indicator-card" v-for="indicator in currentQuestion.indicators" :key="indicator.name">
              <div class="indicator-label">{{ indicator.name }}</div>
              <div class="indicator-value" :class="indicator.status">{{ indicator.value }}</div>
            </div>
          </div>
        </el-card>

        <!-- 问题和选项 -->
        <el-card class="question-card">
          <h3>{{ currentQuestion.question }}</h3>
          <div class="options">
            <div 
              v-for="(option, index) in currentQuestion.options" 
              :key="index"
              class="option-item"
              :class="{ 
                'selected': selectedAnswer === index,
                'correct': showResult && index === currentQuestion.correctAnswer,
                'wrong': showResult && selectedAnswer === index && index !== currentQuestion.correctAnswer
              }"
              @click="selectAnswer(index)"
            >
              <div class="option-label">{{ String.fromCharCode(65 + index) }}</div>
              <div class="option-content">{{ option }}</div>
              <el-icon v-if="showResult && index === currentQuestion.correctAnswer" class="result-icon">
                <CircleCheck />
              </el-icon>
              <el-icon v-if="showResult && selectedAnswer === index && index !== currentQuestion.correctAnswer" class="result-icon">
                <CircleClose />
              </el-icon>
            </div>
          </div>

          <!-- 答案解析 -->
          <el-alert 
            v-if="showResult" 
            :type="isCorrect ? 'success' : 'error'" 
            :title="isCorrect ? '回答正确！' : '回答错误'"
            :closable="false"
            class="result-alert"
          >
            <p>{{ currentQuestion.explanation }}</p>
          </el-alert>

          <div class="action-buttons">
            <el-button 
              v-if="!showResult" 
              type="primary" 
              size="large" 
              :disabled="selectedAnswer === null"
              @click="submitAnswer"
            >
              提交答案
            </el-button>
            <el-button 
              v-if="showResult && currentLevel < totalLevels" 
              type="primary" 
              size="large"
              @click="nextLevel"
            >
              下一关
            </el-button>
            <el-button 
              v-if="showResult && currentLevel >= totalLevels" 
              type="success" 
              size="large"
              @click="finishGame"
            >
              完成游戏
            </el-button>
          </div>
        </el-card>
      </div>

      <!-- 游戏结束 -->
      <div v-if="gameStatus === 'finished'" class="game-finish">
        <div class="finish-card">
          <el-icon class="finish-icon"><Trophy /></el-icon>
          <h2>恭喜完成！</h2>
          <div class="final-stats">
            <div class="stat-item">
              <div class="stat-label">总得分</div>
              <div class="stat-value">{{ score }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">正确率</div>
              <div class="stat-value">{{ correctRate }}%</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">用时</div>
              <div class="stat-value">{{ formatTime(totalTime - timeLeft) }}</div>
            </div>
          </div>
          <div class="achievement-badge">
            <el-icon><Medal /></el-icon>
            <span>获得成就：财务分析新星</span>
          </div>
          <div class="action-buttons">
            <el-button type="primary" size="large" @click="restartGame">
              再玩一次
            </el-button>
            <el-button size="large" @click="goBack">
              返回游戏中心
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, Money, CaretRight, CircleCheck, CircleClose, Trophy, Medal
} from '@element-plus/icons-vue'

const router = useRouter()

// 游戏状态
const gameStatus = ref('ready') // ready, playing, finished
const currentLevel = ref(1)
const totalLevels = 10
const score = ref(0)
const timeLeft = ref(600) // 总时间10分钟
const totalTime = 600
const selectedAnswer = ref(null)
const showResult = ref(false)
const isCorrect = ref(false)
const correctCount = ref(0)
let timer = null

// 题库
const questions = [
  {
    id: 1,
    companyName: '科技创新有限公司',
    reportType: '资产负债表',
    period: '2024年12月31日',
    tableData: [
      { item: '流动资产', value: 5000, ratio: 50 },
      { item: '非流动资产', value: 5000, ratio: 50 },
      { item: '资产总计', value: 10000, ratio: 100 },
      { item: '流动负债', value: 2000, ratio: 33.3 },
      { item: '非流动负债', value: 2000, ratio: 33.3 },
      { item: '负债总计', value: 4000, ratio: 66.6 },
      { item: '所有者权益', value: 6000, ratio: 60 }
    ],
    showRatio: true,
    indicators: [
      { name: '资产负债率', value: '40%', status: 'good' },
      { name: '流动比率', value: '2.5', status: 'good' }
    ],
    question: '根据该公司的资产负债表，以下哪项描述是正确的？',
    options: [
      '公司资产负债率过高，财务风险较大',
      '公司资产负债率适中，财务结构合理',
      '公司流动比率过低，偿债能力不足',
      '公司所有者权益占比过低，资本结构不合理'
    ],
    correctAnswer: 1,
    explanation: '该公司资产负债率为40%，处于合理水平；流动比率为2.5，高于安全线2.0，说明短期偿债能力良好；所有者权益占比60%，资本结构健康。'
  },
  {
    id: 2,
    companyName: '零售连锁集团',
    reportType: '利润表',
    period: '2024年度',
    tableData: [
      { item: '营业收入', value: 50000, ratio: 100 },
      { item: '营业成本', value: 30000, ratio: 60 },
      { item: '营业利润', value: 15000, ratio: 30 },
      { item: '利润总额', value: 14500, ratio: 29 },
      { item: '净利润', value: 10000, ratio: 20 }
    ],
    showRatio: true,
    indicators: [
      { name: '毛利率', value: '40%', status: 'good' },
      { name: '净利率', value: '20%', status: 'excellent' }
    ],
    question: '该公司的盈利能力如何？',
    options: [
      '毛利率和净利率都偏低，盈利能力较差',
      '毛利率较高且净利率优秀，盈利能力强',
      '营业成本占比过高，需要控制成本',
      '利润总额低于营业利润，经营异常'
    ],
    correctAnswer: 1,
    explanation: '该公司毛利率为40%，净利率达到20%，在零售行业中属于优秀水平，说明公司盈利能力强，成本控制良好。'
  },
  {
    id: 3,
    companyName: '制造业股份公司',
    reportType: '现金流量表',
    period: '2024年度',
    tableData: [
      { item: '经营活动现金流入', value: 45000 },
      { item: '经营活动现金流出', value: 38000 },
      { item: '经营活动现金净额', value: 7000 },
      { item: '投资活动现金净额', value: -5000 },
      { item: '筹资活动现金净额', value: 2000 },
      { item: '现金净增加额', value: 4000 }
    ],
    showRatio: false,
    indicators: [
      { name: '经营现金流', value: '7000万', status: 'good' },
      { name: '现金增加', value: '4000万', status: 'good' }
    ],
    question: '根据现金流量表，该公司的现金流状况如何？',
    options: [
      '经营活动现金流为负，经营状况不佳',
      '投资活动现金流为负，说明资金链紧张',
      '经营现金流为正且筹资流为正，现金流健康',
      '现金净增加额过低，流动性风险大'
    ],
    correctAnswer: 2,
    explanation: '该公司经营活动产生现金流量净额为正7000万，说明主营业务现金流良好；投资活动现金流为负是正常的资本支出；筹资活动补充了部分现金；整体现金流健康。'
  },
  {
    id: 4,
    companyName: '房地产开发公司',
    reportType: '资产负债表',
    period: '2024年12月31日',
    tableData: [
      { item: '货币资金', value: 2000, ratio: 10 },
      { item: '存货', value: 12000, ratio: 60 },
      { item: '固定资产', value: 3000, ratio: 15 },
      { item: '其他资产', value: 3000, ratio: 15 },
      { item: '资产总计', value: 20000, ratio: 100 },
      { item: '短期借款', value: 8000, ratio: 40 },
      { item: '长期借款', value: 7000, ratio: 35 },
      { item: '负债总计', value: 15000, ratio: 75 },
      { item: '所有者权益', value: 5000, ratio: 25 }
    ],
    showRatio: true,
    indicators: [
      { name: '资产负债率', value: '75%', status: 'warning' },
      { name: '流动比率', value: '1.75', status: 'warning' }
    ],
    question: '该房地产公司的财务风险如何？',
    options: [
      '资产负债率适中，财务风险可控',
      '资产负债率偏高，且存货占比大，风险较高',
      '流动比率良好，短期偿债能力强',
      '货币资金充足，无需担心流动性'
    ],
    correctAnswer: 1,
    explanation: '该公司资产负债率高达75%，财务杠杆较高；存货占比60%，主要是房地产项目，变现能力较弱；货币资金仅占10%，而短期借款占40%，流动性压力较大，整体财务风险偏高。'
  },
  {
    id: 5,
    companyName: '互联网科技公司',
    reportType: '利润表',
    period: '2024年度',
    tableData: [
      { item: '营业收入', value: 30000, ratio: 100 },
      { item: '营业成本', value: 18000, ratio: 60 },
      { item: '销售费用', value: 6000, ratio: 20 },
      { item: '管理费用', value: 3000, ratio: 10 },
      { item: '研发费用', value: 4500, ratio: 15 },
      { item: '营业利润', value: -1500, ratio: -5 },
      { item: '净利润', value: -2000, ratio: -6.7 }
    ],
    showRatio: true,
    indicators: [
      { name: '毛利率', value: '40%', status: 'good' },
      { name: '净利率', value: '-6.7%', status: 'bad' }
    ],
    question: '该互联网公司出现亏损的主要原因是什么？',
    options: [
      '营业收入过低，市场竞争力不足',
      '营业成本过高，毛利率太低',
      '期间费用（销售、管理、研发）占比过高',
      '公司经营异常，应立即停业整顿'
    ],
    correctAnswer: 2,
    explanation: '该公司毛利率达40%是健康的，但期间费用合计占营业收入的45%（销售20%+管理10%+研发15%），导致亏损。这在成长期的互联网公司中较常见，重点是要关注收入增长和费用控制。'
  },
  {
    id: 6,
    companyName: '传统制造企业',
    reportType: '财务指标分析',
    period: '2024年度',
    tableData: [
      { item: '营业收入', value: 80000 },
      { item: '应收账款', value: 20000 },
      { item: '存货', value: 15000 },
      { item: '流动资产', value: 50000 },
      { item: '流动负债', value: 30000 }
    ],
    showRatio: false,
    indicators: [
      { name: '应收账款周转天数', value: '91天', status: 'warning' },
      { name: '存货周转天数', value: '68天', status: 'warning' },
      { name: '流动比率', value: '1.67', status: 'normal' }
    ],
    question: '从营运能力角度看，该公司存在什么问题？',
    options: [
      '应收账款和存货周转较慢，占用资金多',
      '流动比率过低，偿债能力不足',
      '营业收入过高，超出企业承受能力',
      '各项指标正常，营运能力优秀'
    ],
    correctAnswer: 0,
    explanation: '应收账款周转天数91天（超过3个月），存货周转天数68天，都偏长，说明资金回收慢、存货积压，营运资金效率低，需要加强应收账款回收和存货管理。'
  },
  {
    id: 7,
    companyName: '连锁餐饮企业',
    reportType: '比较利润表',
    period: '2023-2024年度对比',
    tableData: [
      { item: '2024营业收入', value: 60000 },
      { item: '2023营业收入', value: 50000 },
      { item: '收入增长率', value: 20 },
      { item: '2024净利润', value: 4500 },
      { item: '2023净利润', value: 5000 },
      { item: '利润增长率', value: -10 }
    ],
    showRatio: false,
    indicators: [
      { name: '收入增长', value: '+20%', status: 'good' },
      { name: '利润增长', value: '-10%', status: 'bad' },
      { name: '净利率变化', value: '10%→7.5%', status: 'warning' }
    ],
    question: '该公司出现增收不增利的情况，可能原因是？',
    options: [
      '成本上升或费用增加，侵蚀了利润空间',
      '会计政策变更导致的统计差异',
      '营业收入数据造假，实际收入下降',
      '这是正常现象，不需要关注'
    ],
    correctAnswer: 0,
    explanation: '收入增长20%但利润反而下降10%，净利率从10%降到7.5%，典型的增收不增利情况。最可能的原因是原材料成本上涨、人工成本增加或为扩张门店投入过多费用，导致利润率下降。'
  },
  {
    id: 8,
    companyName: '新能源汽车公司',
    reportType: '资产结构分析',
    period: '2024年12月31日',
    tableData: [
      { item: '固定资产', value: 25000, ratio: 50 },
      { item: '在建工程', value: 10000, ratio: 20 },
      { item: '无形资产', value: 5000, ratio: 10 },
      { item: '流动资产', value: 10000, ratio: 20 },
      { item: '资产总计', value: 50000, ratio: 100 }
    ],
    showRatio: true,
    indicators: [
      { name: '固定资产占比', value: '50%', status: 'normal' },
      { name: '在建工程占比', value: '20%', status: 'warning' },
      { name: '流动资产占比', value: '20%', status: 'warning' }
    ],
    question: '该公司的资产结构反映出什么特点？',
    options: [
      '典型的重资产行业，固定资产投入大',
      '流动资产占比过高，资产利用效率低',
      '无形资产占比异常，存在资产泡沫',
      '资产结构失衡，应立即调整'
    ],
    correctAnswer: 0,
    explanation: '新能源汽车是典型的重资产行业，需要大量投资生产线（固定资产50%）和扩建产能（在建工程20%）。流动资产占比20%略低但尚可接受，这是资本密集型制造业的正常特征。'
  },
  {
    id: 9,
    companyName: '软件服务公司',
    reportType: '成长性分析',
    period: '2022-2024年度',
    tableData: [
      { item: '2024营业收入', value: 20000 },
      { item: '2023营业收入', value: 15000 },
      { item: '2022营业收入', value: 10000 },
      { item: '2024净利润', value: 3000 },
      { item: '2023净利润', value: 1500 },
      { item: '2022净利润', value: 500 }
    ],
    showRatio: false,
    indicators: [
      { name: '收入复合增长率', value: '41.4%', status: 'excellent' },
      { name: '利润复合增长率', value: '141.4%', status: 'excellent' },
      { name: '净利率', value: '5%→10%→15%', status: 'excellent' }
    ],
    question: '该公司的成长性和盈利质量如何？',
    options: [
      '收入和利润都在高速增长，且盈利质量提升',
      '增长过快可能不可持续，存在风险',
      '利润增长远超收入增长，数据可能有问题',
      '净利率提升不明显，成长性一般'
    ],
    correctAnswer: 0,
    explanation: '该公司三年收入年均增长41.4%，利润年均增长141.4%，更重要的是净利率从5%提升到15%，说明不仅规模扩大，盈利能力也在显著提升，这是高质量增长的典型特征。'
  },
  {
    id: 10,
    companyName: '综合商业集团',
    reportType: '综合财务分析',
    period: '2024年度',
    tableData: [
      { item: '营业收入', value: 100000 },
      { item: '净利润', value: 8000 },
      { item: '资产总额', value: 80000 },
      { item: '净资产', value: 40000 },
      { item: '经营现金流', value: 12000 }
    ],
    showRatio: false,
    indicators: [
      { name: 'ROE(净资产收益率)', value: '20%', status: 'excellent' },
      { name: 'ROA(总资产收益率)', value: '10%', status: 'good' },
      { name: '现金流/净利润', value: '1.5', status: 'excellent' }
    ],
    question: '综合评价该公司的财务状况和经营质量？',
    options: [
      '盈利能力强且现金流质量高，经营状况优秀',
      'ROE虽高但ROA偏低，存在过度杠杆风险',
      '现金流远超净利润，存在利润操纵嫌疑',
      '各项指标平平，没有投资价值'
    ],
    correctAnswer: 0,
    explanation: 'ROE达20%、ROA为10%都是优秀水平，说明盈利能力强；经营现金流/净利润比为1.5（大于1），说明利润质量高，不是纸面富贵；综合来看这是一家经营状况优秀的公司。'
  }
]

// 当前问题
const currentQuestion = computed(() => {
  return questions[currentLevel.value - 1]
})

// 正确率
const correctRate = computed(() => {
  return Math.round((correctCount.value / totalLevels) * 100)
})

// 格式化时间
const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

// 格式化数字
const formatNumber = (num) => {
  return num.toLocaleString()
}

// 开始游戏
const startGame = () => {
  gameStatus.value = 'playing'
  startTimer()
  ElMessage.success('游戏开始！')
}

// 启动计时器
const startTimer = () => {
  timer = setInterval(() => {
    if (timeLeft.value > 0) {
      timeLeft.value--
    } else {
      clearInterval(timer)
      ElMessage.warning('时间到！')
      finishGame()
    }
  }, 1000)
}

// 选择答案
const selectAnswer = (index) => {
  if (!showResult.value) {
    selectedAnswer.value = index
  }
}

// 提交答案
const submitAnswer = () => {
  showResult.value = true
  isCorrect.value = selectedAnswer.value === currentQuestion.value.correctAnswer
  
  if (isCorrect.value) {
    score.value += 100
    correctCount.value++
    ElMessage.success('回答正确！+100分')
  } else {
    ElMessage.error('回答错误！')
  }
}

// 下一关
const nextLevel = () => {
  currentLevel.value++
  selectedAnswer.value = null
  showResult.value = false
  isCorrect.value = false
}

// 完成游戏
const finishGame = () => {
  gameStatus.value = 'finished'
  if (timer) {
    clearInterval(timer)
  }
  ElMessage.success('恭喜完成所有关卡！')
}

// 重新开始
const restartGame = () => {
  gameStatus.value = 'ready'
  currentLevel.value = 1
  score.value = 0
  timeLeft.value = totalTime
  selectedAnswer.value = null
  showResult.value = false
  isCorrect.value = false
  correctCount.value = 0
}

// 返回游戏中心
const goBack = () => {
  if (timer) {
    clearInterval(timer)
  }
  router.push('/learning/games')
}

onMounted(() => {
  ElMessage.info('准备好挑战财务分析了吗？')
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.finance-analysis-game {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.game-header {
  background: white;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.game-title {
  flex: 1;
  text-align: center;
}

.game-title h1 {
  margin: 0 0 5px 0;
  font-size: 24px;
  color: #303133;
}

.game-title p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.game-stats {
  display: flex;
  gap: 10px;
}

.game-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 开始界面 */
.game-start {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
}

.start-card {
  background: white;
  border-radius: 16px;
  padding: 50px;
  text-align: center;
  max-width: 600px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.start-icon {
  font-size: 80px;
  color: #67c23a;
  margin-bottom: 20px;
}

.start-card h2 {
  margin: 0 0 15px 0;
  font-size: 32px;
  color: #303133;
}

.start-card > p {
  margin: 0 0 30px 0;
  color: #606266;
  font-size: 16px;
}

.game-rules {
  text-align: left;
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.game-rules h3 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 18px;
}

.game-rules ul {
  margin: 0;
  padding-left: 20px;
  color: #606266;
}

.game-rules li {
  margin-bottom: 8px;
  line-height: 1.6;
}

/* 游戏进行中 */
.game-playing {
  display: grid;
  gap: 20px;
}

.financial-report {
  background: white;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.financial-report :deep(.el-table) {
  margin-top: 20px;
}

.negative {
  color: #f56c6c;
}

.financial-indicators {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.indicator-card {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.indicator-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.indicator-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.indicator-value.good {
  color: #67c23a;
}

.indicator-value.excellent {
  color: #409eff;
}

.indicator-value.warning {
  color: #e6a23c;
}

.indicator-value.bad {
  color: #f56c6c;
}

.indicator-value.normal {
  color: #909399;
}

.question-card {
  background: white;
}

.question-card h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  color: #303133;
  line-height: 1.6;
}

.options {
  display: grid;
  gap: 15px;
  margin-bottom: 20px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 2px solid #dcdfe6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.option-item:hover {
  border-color: #409eff;
  background: #ecf5ff;
}

.option-item.selected {
  border-color: #409eff;
  background: #ecf5ff;
}

.option-item.correct {
  border-color: #67c23a;
  background: #f0f9ff;
}

.option-item.wrong {
  border-color: #f56c6c;
  background: #fef0f0;
}

.option-label {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.option-item.correct .option-label {
  background: #67c23a;
}

.option-item.wrong .option-label {
  background: #f56c6c;
}

.option-content {
  flex: 1;
  color: #303133;
  line-height: 1.6;
}

.result-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.option-item.correct .result-icon {
  color: #67c23a;
}

.option-item.wrong .result-icon {
  color: #f56c6c;
}

.result-alert {
  margin-bottom: 20px;
}

.result-alert p {
  margin: 10px 0 0 0;
  line-height: 1.6;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* 游戏结束 */
.game-finish {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
}

.finish-card {
  background: white;
  border-radius: 16px;
  padding: 50px;
  text-align: center;
  max-width: 600px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.finish-icon {
  font-size: 80px;
  color: #f59e0b;
  margin-bottom: 20px;
}

.finish-card h2 {
  margin: 0 0 30px 0;
  font-size: 32px;
  color: #303133;
}

.final-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-item {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
}

.stat-label {
  font-size: 14px;
  margin-bottom: 10px;
  opacity: 0.9;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
}

.achievement-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  border-radius: 8px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;
}

.achievement-badge .el-icon {
  font-size: 24px;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    text-align: center;
  }
  
  .game-stats {
    flex-direction: column;
  }
  
  .start-card, .finish-card {
    padding: 30px 20px;
  }
  
  .final-stats {
    grid-template-columns: 1fr;
  }
  
  .financial-indicators {
    grid-template-columns: 1fr;
  }
}
</style>

